import { border, primaryColor } from "../utils/public.js";
class Tab extends HTMLElement {
    constructor() {
        super();

        const template = document.createElement("template");

        template.innerHTML = `
            <style>
                :host {
                    display: inline-block;
                    box-sizing: border-box;
                    margin-left: 10px;
                }
                .cp-tab {
                    display: block;
                }
                .cp-tab-header {
                    width: 100%;
                }
                .cp-tab-header-wrap {
                    display: flex;
                }
                .cp-tab-header-item {
                    padding: 4px 10px;
                    cursor: pointer;
                }
                .cp-tab-body {
                    width: 100%;
                }
                .cp-tab-body-wrap {
                    display: flex;
                }
            </style>
            
            <div class="cp-tab">
                <div class="cp-tab-header">
                    <div class="cp-tab-header-wrap"></div>
                </div>
                <div class="cp-tab-body">
                    <div class="cp-tab-body-wrap">
                        <slot></slot>
                    </div>
                </div>
            </div>
        `;

        this._shadowRoot = this.attachShadow({
            mode: "open"
        });
        this._shadowRoot.appendChild(template.content.cloneNode(true));

        this.$tab = this._shadowRoot.querySelector(".cp-tab");
        this.$tabHeader = this._shadowRoot.querySelector(".cp-tab-header-wrap");
        this.$tabBody = this._shadowRoot.querySelector(".cp-tab-body-wrap");
    }

    static get observedAttributes() {
        return ["active"];
    }

    get active() {
        return this.getAttribute("active") || 0;
    }

    set active(value) {
        this.setAttribute("active", value);
    }

    /**
     * 获取所有的兄弟元素且name属性相同
     * @param {String} targetEle 元素的nodeName
     * @param {String} name 元素的name属性
     * @returns {Array} NodeList
     */
    getSiblings(targetEle, name) {
        const arr = this.parentNode.childNodes || [];
        let tmp = [];

        for (let i = 0, len = arr.length; i < len; i++) {
            if (arr[i].nodeName.toLowerCase() === targetEle && arr[i] !== this) {
                if (name) {
                    if (arr[i].name === name) {
                        tmp.push(arr[i]);
                    }
                } else {
                    tmp.push(arr[i]);
                }
            }
        }

        if (name) {
        }
        return tmp;
    }

    connectedCallback() {
        console.log(this.children, "tab");
        const children = this.children;
        children.forEach((element, i) => {
            const name = element.nodeName.toLowerCase();
            if (name !== "cp-tab-pane") {
                throw new Error("cp-tab的子元素只能是cp-tab-pane");
            } else {
                const len = element.children.length;
                const tmp = document.createElement("div");
                tmp.setAttribute("class", "cp-tab-header-item");
                // console.log(element.children);
                if (len > 0) {
                    tmp.appendChild(element.children[0].childNodes[0]);
                    console.log(element.children[0].childNodes);
                } else {
                    const s = document.createTextNode(element.title);
                    tmp.appendChild(s);
                    console.log(s, "s");
                }
                this.$tabHeader.appendChild(tmp);
                console.log(element.nodeName);
                console.log(element.title);
            }
        });
    }

    attributeChangedCallback(name, oldVal, newVal) {
        this.render(name, newVal);
    }
    render(name, newVal) {
        if (name === "checked") {
            if (this.checked === null) {
                this.$radioInput.removeAttribute("checked");
            } else {
                this.$radioInput.setAttribute("checked", true);
            }
            this.$radio.classList.toggle("cp-radio-icon__checked");
        }
        if (name === "disabled") {
            console.log(newVal);
        }
    }
}

if (!customElements.get("cp-tab")) {
    customElements.define("cp-tab", Tab);
}
